// @flow
import React from 'react'
import styles from './Content.css'
import CmPage from 'components/CmPage'
import KmxPage from '../KmxPage'
import InstallDocker from '../InstallDocker'
import CharterPage from '../CharterPage'
import ServicePage from '../ServicePage'
type Props = {
  step: number
}
export default class Content extends React.Component {
  props: Props
  render () {
    const { step } = this.props
    return (
      <div className={styles['content']}>
        <div className={styles['left-bar']}>
          <div className={styles['text']}>第{step}步</div>
          <div className={styles['logo']}>
            <img src={require('../../../public/logo-white.png')} height='30' />
          </div>
        </div>
        <div className={styles['main']}>
          <div className={styles['listContainer']}>
            <div className={styles['list']} style={{ left: `${(1 - step) * 550}px` }}>
              <ul>
                <li role='pageli'>
                  <CmPage {...this.props} />
                </li>
                <li role='pageli'>
                  <KmxPage {...this.props} />
                </li>
                <li role='pageli'>
                  <InstallDocker {...this.props} />
                </li>
                <li role='pageli'>
                  <CharterPage {...this.props} />
                </li>
                <li role='pageli'>
                  <ServicePage {...this.props} />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
